<template>
  <el-dialog title="选择标签" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="600px">
    <div class="dialog-big">
      <div class="dialog-title">
        <div class="title-left">
          <el-input placeholder="搜索标签组/标签" size="small" v-model="form.label" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" size="small"></el-button>
          </el-input>
        </div>
        <div class="title-right">
          <el-switch v-model="value" active-color="#13ce66"></el-switch>仅显示已选中标签</div>
      </div>
      <el-form>
        <el-form-item v-for="(item,index) in cities" :key="item.rule">
          <el-checkbox @change="val => handleCheckAllChange(val, item)" :indeterminate="itemIndeterminate(item)" v-model="item.checkAll" :disabled="index==1">{{item.label}}</el-checkbox>
          <el-checkbox-group v-model="checkedCities" v-if="index==0">
            <el-checkbox v-for="city in item.items" :key="city.rule" :label="city.rule">{{city.label}}</el-checkbox>
          </el-checkbox-group>
          <div class="tips" v-if="index==1"><i class="el-icon-info"></i>多号聚合模式下不支持选择个人标签，请至单号模式下操作使用</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button>提交</el-button>
    </div>
  </el-dialog>
</template>

<script>


export default {
  name: 'selectLabelPage',
  components: {
  },
  data() {
    return {
      value:false,
      form:{
        label:null,//搜索标签
    },
      cities: [],
      checkedCities: []
    }
  },
  created() {
    this.getList();
  },
  mounted() {
  },
  watch: {},
  methods: {
    getList() {
      // 假设是后台获取的数据
      const data = [{
        "label": "客户等级",
        "rule": "/customer/customer/*",
        "items": [{
          "label": "重要",
          "rule": "/customer/customer/update-process-standard"
        },
          {
            "label": "一般",
            "rule": "/customer/customer/save"
          },
          {
            "label": "核心",
            "rule": "/customer/customer/ac"
          },
        ]
      },
        {
          "label": "个人标签",
          "rule": "/factory/factory/*",
          "items": [{
            "label": "重要",
            "rule": "/factory/factory/line-list"
          },
            {
              "label": "一般",
              "rule": "/factory/factory/enable-line"
            },
          ]
        },
      ]

      this.cities = data.map(v => ({
        ...v,
        checkAll: false,
        allRule: v.items.map(i => i.rule)
      }))
    },
    //判断是否是不确定    条件1：当前item.items里至少有一个选上   条件2：当前item.items里至少有一个没有被选上
    itemIndeterminate(item){
      return item.allRule.some(v => this.checkedCities.indexOf(v) > -1) && !item.allRule.every(v => this.checkedCities.indexOf(v) > -1)
    },
    handleCheckAllChange(val, item){
      const filterArr = this.checkedCities.filter(v => item.allRule.indexOf(v) === -1);
      this.checkedCities = val ? filterArr.concat(item.allRule) : filterArr
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    }
  }
}
</script>

<style scoped lang="scss">
.footer-btn {
  display: flex;
  justify-content: flex-end;
}
.dialog-big {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 4px 4px 0 0;
  .dialog-title {
    display: flex;
    background-color: #f9f9f9;
    height: 44px;
    align-items: center;
    outline: 1px solid #e9e9e9;
    padding: 0 16px;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

::v-deep .el-dialog__body {
  overflow-y: auto;
  max-height: 600px;
  .el-form {
    padding: 10px;
    .el-checkbox-group {

      .el-checkbox {
        display: inline-block;
        background: rgba(0, 0, 0, .04);
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, .15);
        font-size: 12px;
        line-height: 20px;
        padding: 3px 8px;
        cursor: pointer;
        margin-right: 8px;
        margin-bottom: 8px;
        .el-checkbox__inner {
          display: none;
        }
        .el-checkbox__label {
          padding-left: 0px;
        }
        &.is-checked {
          color: #2f54eb;
          border-color: #2f54eb;
          background-color: #fff;
        }
      }

    }
  }
  .el-switch {
    margin-right: 10px;
  }
}
</style>
